import { defineStore } from "pinia"
import {ref, reactive} from "vue"
import {useRouter} from 'vue-router'

export const useNavTabs = defineStore('nav-tabs', () => {

    let activeName = ref("/home/settings_index")
    let router = useRouter()

    let navTabs = reactive([
        {label: '网站设置-主页', link: '/home/settings_index', active: true}
    ])

    function addTabs(label, link) {
        navTabs.forEach(item => item.active = false)
        navTabs.push({"label": label, "link": link, active: true})
        activeName.value = link
    }

    function removeTabs(link) {
        let index = navTabs.findIndex(item => item.link == link)
        if(index == 0) {
            return
        }
        if(navTabs[index].active) {
            // navTabs[0].active = true
            activeName.value = '/home/settings_index'
            activeName.value = navTabs[0].link
            router.push({name: 'st_index'})
        }
        navTabs.splice(index, 1)
    }

    function chgTabs(label, link) {
        let index = navTabs.findIndex(item => item.label == label)
        if(index == -1){
            addTabs(label, link)
        } else {
            navTabs.forEach(item => item.active = false)
            navTabs[index].active = true
            activeName.value = navTabs[index].link
        }
    }

    return {activeName, navTabs, addTabs, removeTabs, chgTabs}
})